<template>
  <div style="margin-left: 20px;">
    <span>列宽度</span>
    <el-input clearable style="width: 60px;margin-left: 10px;" v-model="columnWidth"></el-input>
    <el-button style="margin-left: 5px" @click="setColumnWidthOfBatch">确定</el-button>
  </div>
</template>

<script lang="ts">
export default {
  name: "TableColumnWidth"
}
</script>
<script lang="ts" setup>
import {EditTableColumn} from "@/extension/edit-table/edit-table-schema";
import {ElMessage} from "element-plus";
import {ref} from "vue";

type Props = {
  selections: Array<Partial<EditTableColumn>>
}
const props = defineProps<Props>()
const columnWidth = ref('')
const setColumnWidthOfBatch = () => {
  if (props.selections.length === 0) {
    ElMessage.error('请选择要设置的列')
    return
  }
  props.selections.map(row => {
    row.width = columnWidth.value
  })
}
</script>

<style scoped>

</style>
